✨ feat: support antd v6 cssVar #198
Conversation
BREAKING CHANGES: bump peerDependencies antd >= v6
📝 WalkthroughWalkthrough本次变更将样式相关逻辑从依赖 token 切换为使用 cssVar，并在样式工厂与主题 Hook 之间传递 cssVar。Ant Design 依赖升级至 6.0.0-alpha.1，并同步调整类型定义和样式工厂工具，保证 cssVar 在各层级正确传递和使用。测试断言中的颜色格式也进行了统一调整，测试环境配置改为 happy-dom，路径别名改为绝对路径。GitHub Actions 工作流升级了关键动作版本和 Node.js 版本。StyleProviderProps 接口移除了 autoClear 属性。 Changes
Sequence Diagram(s)sequenceDiagram
participant App
participant useStyles
participant createStylesFactory
participant useAntdTheme
participant antdTheme
App->>useStyles: 调用 useStyles()
useStyles->>createStylesFactory: 获取样式工具（含 cssVar）
createStylesFactory->>useAntdTheme: 获取主题（token, cssVar）
useAntdTheme->>antdTheme: 调用 theme.useToken()
antdTheme-->>useAntdTheme: 返回 { token, cssVar }
useAntdTheme-->>createStylesFactory: 返回 { token, cssVar }
createStylesFactory-->>useStyles: 返回样式工具（含 cssVar）
useStyles-->>App: 返回样式对象
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Poem
✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
🎊 PR Preview b922a94 has been successfully built and deployed to https://ant-design-antd-style-preview-pr-198.surge.sh 🕐 Build time: 99.196s
🤖 By surge-preview |
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
docs/demos/api/createStyles/default.tsx (1)
11-12: cssVar 值格式变化的重要说明从 token 迁移到 cssVar 时，值的格式发生了重要变化：
- token 属性返回原始值（如
8px）- cssVar 属性返回 CSS 自定义属性字符串（如
var(--ant-border-radius-lg)）这个 demo 正确展示了如何直接使用 cssVar 值，无需添加像素后缀。这是一个重要的 API 变化，建议在文档中明确说明。
Also applies to: 17-17, 23-24, 30-31
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
docs/demos/api/createStyles/default.tsx(1 hunks)package.json(2 hunks)src/factories/createStyles/index.ts(2 hunks)src/factories/createStyles/types.ts(1 hunks)src/hooks/useAntdTheme.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
src/factories/createStyles/types.ts (1)
src/types/theme.ts (1)
FullToken(71-71)
src/hooks/useAntdTheme.ts (2)
src/types/theme.ts (1)
AntdTheme(67-69)src/hooks/useAntdStylish.ts (1)
useAntdStylish(11-22)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: preview
🔇 Additional comments (7)
package.json (1)
99-99: 确认 antd v6.0.0-alpha.1 未被弃用但仍为预发布版从 npm Registry 查询可知
• description: “An enterprise-class UI design language and React components implementation”
• deprecated: null虽然该版本未被标记为弃用，但仍属 alpha 预发布，可能存在稳定性和兼容性风险。建议：
- 在生产环境部署前进行充分回归和冒烟测试
- 在文档中说明如何回退至 v5.x 系列以防紧急问题
- 关注 antd 官方 v6 稳定版发布时间表，并在合适时机升级至正式版
src/factories/createStyles/types.ts (1)
19-19: 类型定义正确且一致添加
cssVar: FullToken类型定义是正确的，与现有的token属性保持一致。这样设计合理，因为 cssVar 和 token 都代表相同的设计令牌结构，只是格式不同（CSS 变量 vs 常规值）。src/factories/createStyles/index.ts (2)
60-61: cssVar 解构和传递实现正确从 theme 中正确解构出 cssVar 并与其他属性分离，实现符合预期。解构模式确保了 cssVar 和 token 的正确分离。
78-78: 确认 cssVar 可用性
useAntdTheme已通过theme.useToken()解构并返回cssVar，theme对象确实包含该属性，无需额外修改。src/hooks/useAntdTheme.ts (2)
4-4: 正确使用 antd v6 的 theme API从 antd 导入 theme 并使用 theme.useToken() 是正确的迁移方式，符合 antd v6 的新 API 设计。
11-11: useMemo 依赖数组更新正确正确更新了 useMemo 的依赖数组，包含新增的 cssVar 参数，确保当 cssVar 变化时能正确重新计算。
docs/demos/api/createStyles/default.tsx (1)
9-9: 正确展示 cssVar 使用方式demo 正确地从 token 迁移到 cssVar，为用户提供了清晰的使用示例。
|
|
||
| export const useAntdTheme = (): AntdTheme => { | ||
| const token = useAntdToken(); | ||
| const { token, cssVar } = theme.useToken(); |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
验证 theme.useToken() 返回 cssVar
确认 antd v6.0.0-alpha.1 的 theme.useToken() 确实返回 cssVar 属性。
🌐 Web query:
Does Ant Design v6.0.0-alpha.1 theme.useToken() method return cssVar property?
💡 Result:
In Ant Design v6.0.0-alpha.1, the theme.useToken() method does not return CSS variables directly. Instead, it provides JavaScript objects containing the resolved token values. This approach allows for dynamic theming and customization within your React components.
However, it's important to note that Ant Design's theming system does not natively support the use of CSS variables within tokens. This limitation arises because the theming algorithm does not interpret CSS variables, which can lead to issues when attempting to use them in tokens. (github.com)
To incorporate CSS variables into your Ant Design theming, you can utilize the @ant-design/cssinjs package. This package enables the use of CSS variables in your styles, providing a more flexible and dynamic theming solution. By integrating @ant-design/cssinjs, you can define your theme tokens as CSS variables and apply them throughout your application. (github.com)
In summary, while theme.useToken() in Ant Design v6.0.0-alpha.1 does not return CSS variables, you can achieve CSS variable-based theming by incorporating the @ant-design/cssinjs package into your project.
Citations:
- 1: Custom css variables not work for Seed Token ant-design#49041
- 2: [RFC] CSS variable theme of antd ant-design#44654
修复 theme.useToken() 解构
Ant Design v6.0.0-alpha.1 中，theme.useToken() 并不返回 cssVar 属性，直接解构会导致 cssVar 值为 undefined。
请处理以下位置：
- 文件：
src/hooks/useAntdTheme.ts
行号：8
当前：建议：const { token, cssVar } = theme.useToken();
- 若不依赖 CSS 变量，将解构改为：
const { token } = theme.useToken();
- 若需使用 CSS 变量，请安装并配置
@ant-design/cssinjs，并通过其 API 获取cssVar（例如在入口文件或主题配置中启用 CSSinJS 变量支持）。
- 若不依赖 CSS 变量，将解构改为：
🤖 Prompt for AI Agents
In src/hooks/useAntdTheme.ts at line 8, theme.useToken() is destructured to get
cssVar, but in Ant Design v6.0.0-alpha.1 cssVar is not returned and will be
undefined. To fix this, remove cssVar from the destructuring and only extract
token if CSS variables are not needed. If CSS variables are required, set up
@ant-design/cssinjs properly and obtain cssVar through its API instead of
directly from theme.useToken().
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (3)
tests/components/__snapshots__/ThemeProvider.test.tsx.snapis excluded by!**/*.snaptests/functions/__snapshots__/createInstance.test.tsx.snapis excluded by!**/*.snaptests/functions/__snapshots__/createStyles.test.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (6)
package.json(4 hunks)src/factories/createThemeProvider/ThemeSwitcher.test.tsx(2 hunks)tests/functions/createGlobalStyle.test.tsx(2 hunks)tests/functions/createStyles.test.tsx(3 hunks)tests/functions/extractStaticStyle.test.tsx(1 hunks)vitest.config.ts(1 hunks)
✅ Files skipped from review due to trivial changes (2)
- tests/functions/createGlobalStyle.test.tsx
- src/factories/createThemeProvider/ThemeSwitcher.test.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- package.json
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: preview
🔇 Additional comments (6)
tests/functions/createStyles.test.tsx (3)
54-55: 明确 TODO 的具体要求和时间表注释掉的背景色断言带有 "需要在 Release v4 之前恢复" 的 TODO，但缺乏具体的上下文说明。
请明确以下信息：
- 为什么需要暂时注释掉这个断言？
- v4 发布的具体时间表是什么？
- 恢复断言时期望的背景色值是什么？
建议在代码中添加更详细的注释说明原因，或者创建一个 issue 来跟踪这个 TODO 项目。
221-221: 颜色格式标准化符合预期将十六进制颜色值从大写
#1677FF改为小写#1677ff是合理的标准化，符合 CSS 规范和大多数项目的约定。
264-264: 使用命名颜色提高可读性将颜色值从 RGB 格式
'rgb(255, 0, 0)'改为命名颜色'red'提高了代码可读性，这是一个很好的改进。vitest.config.ts (3)
1-1: 正确导入路径解析工具添加
resolve导入以支持绝对路径别名配置是正确的做法。
10-11: 使用绝对路径提高配置可靠性将别名路径从相对字符串改为使用
resolve(__dirname, './src')的绝对路径是最佳实践，可以避免相对路径解析问题。
7-7: 请在本地执行以下脚本验证 happy-dom 环境下的测试兼容性由于 CI 沙箱中未安装 Vitest，建议在本地环境先安装依赖并运行测试：
#!/bin/bash # 安装项目依赖 npm ci # 使用 npx 运行所有测试并输出详细报告 npx vitest run --reporter=verbose # 检查代码中是否存在依赖 jsdom 特定功能的测试用例 rg -A 5 -B 5 "jsdom|JSDOM" .运行完成后，请确认所有测试均通过且没有检出对 jsdom 的直接依赖。若在本地环境中测试通过，则可以安心合并该改动。
| expect(item.tag).toMatch( | ||
| /<style data-rc-order="prepend" data-rc-priority="-9999" data-antd-version="6.0.0-alpha.1">\s*/, | ||
| ); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
考虑测试断言的维护性
将版本断言从语义版本模式改为硬编码的 "6.0.0-alpha.1" 可能会在 antd 版本更新时导致测试失败。
建议考虑以下方案之一：
- 使用更灵活的正则表达式匹配 6.x 版本：
/6\.\d+\.\d+(-\w+\.\d+)?/ - 从 package.json 中动态读取 antd 版本进行断言
- 如果确实需要精确版本控制，请确保在版本升级时同步更新此测试
- expect(item.tag).toMatch(
- /<style data-rc-order="prepend" data-rc-priority="-9999" data-antd-version="6.0.0-alpha.1">\s*/,
- );
+ expect(item.tag).toMatch(
+ /<style data-rc-order="prepend" data-rc-priority="-9999" data-antd-version="6\.\d+\.\d+(-\w+\.\d+)?">\s*/,
+ );📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| expect(item.tag).toMatch( | |
| /<style data-rc-order="prepend" data-rc-priority="-9999" data-antd-version="6.0.0-alpha.1">\s*/, | |
| ); | |
| expect(item.tag).toMatch( | |
| /<style data-rc-order="prepend" data-rc-priority="-9999" data-antd-version="6\.\d+\.\d+(-\w+\.\d+)?">\s*/, | |
| ); |
🤖 Prompt for AI Agents
In tests/functions/extractStaticStyle.test.tsx around lines 56 to 58, the test
assertion uses a hardcoded antd version "6.0.0-alpha.1" which reduces
maintainability. To fix this, replace the hardcoded version in the regex with a
more flexible pattern that matches any 6.x version, such as
/6\.\d+\.\d+(-\w+\.\d+)?/, or alternatively, dynamically read the antd version
from package.json and use it in the assertion. This will prevent test failures
when the antd version updates.
# [4.0.0-alpha.1](v3.7.1...v4.0.0-alpha.1) (2025-07-24) ### ✨ Features * Support antd v6 cssVar ([cd838b0](cd838b0)) ### 💥 BREAKING CHANGES * bump peerDependencies antd >= v6
There was a problem hiding this comment.
Actionable comments posted: 1
🔭 Outside diff range comments (1)
.github/workflows/preview.yml (1)
21-31: 缺少 step ID，steps.preview_step引用将报错
afc163/surge-preview步骤未声明id，后续通过steps.preview_step.outputs.preview_url无法解析，CI 会在运行时抛出Cannot read property 'outputs' of undefined。修复示例：
- - uses: afc163/surge-preview@v1 + - id: preview_step + uses: afc163/surge-preview@v1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
tests/functions/__snapshots__/createInstance.test.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (6)
.github/workflows/preview.yml(1 hunks).github/workflows/release.yml(2 hunks).github/workflows/test.yml(1 hunks)CHANGELOG.md(1 hunks)package.json(5 hunks)src/factories/createStyleProvider/index.tsx(1 hunks)
✅ Files skipped from review due to trivial changes (3)
- .github/workflows/test.yml
- .github/workflows/release.yml
- src/factories/createStyleProvider/index.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- package.json
🧰 Additional context used
🪛 markdownlint-cli2 (0.17.2)
CHANGELOG.md
5-5: Heading levels should only increment by one level at a time
Expected: h2; Actual: h3
(MD001, heading-increment)
🔇 Additional comments (3)
.github/workflows/preview.yml (3)
9-9: checkout 升级到 v4 ✔️
升级到actions/checkout@v4与官方推荐保持一致，没有额外风险。
12-15: 请确认 pnpm-10 与现有 lockfile 兼容性
仓库若仍保留旧版pnpm-lock.yaml，直接拉升到 pnpm 10 可能触发 lockfile 重写或解析失败，尤其是在 workspace 场景下。建议本地以 pnpm 10 重新生成 lockfile 并提交，或在 CI 前增加pnpm -v断言。
16-19: Node.js 22 非 LTS，需确认依赖兼容
当前生态大多数包的 CI 仍以 Node 20 LTS 为基线。将 CI 主版本直接切到22可能导致编译或 native 模块安装失败。建议：
- 增加 matrix，保留
20与22并观测。- 或在 release/workflow 中仅使用
20，在实验性 job 中验证22。
| # [4.0.0-alpha.1](https://github.com/ant-design/antd-style/compare/v3.7.1...v4.0.0-alpha.1) (2025-07-24) | ||
|
|
||
| ### ✨ Features | ||
|
|
||
| - Support antd v6 cssVar ([cd838b0](https://github.com/ant-design/antd-style/commit/cd838b0)) | ||
|
|
||
| ### 💥 BREAKING CHANGES | ||
|
|
||
| - bump peerDependencies antd >= v6 |
There was a problem hiding this comment.
修复标题层级，避免 markdownlint 报错
版本标题使用了 #，与文件中其他版本标题的 ## 不一致，且导致 # ➜ ### 直接跳过一级标题层级，被 markdownlint 标记为 MD001。请统一为二级标题。
-# [4.0.0-alpha.1](https://github.com/ant-design/antd-style/compare/v3.7.1...v4.0.0-alpha.1) (2025-07-24)
+## [4.0.0-alpha.1](https://github.com/ant-design/antd-style/compare/v3.7.1...v4.0.0-alpha.1) (2025-07-24)📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| # [4.0.0-alpha.1](https://github.com/ant-design/antd-style/compare/v3.7.1...v4.0.0-alpha.1) (2025-07-24) | |
| ### ✨ Features | |
| - Support antd v6 cssVar ([cd838b0](https://github.com/ant-design/antd-style/commit/cd838b0)) | |
| ### 💥 BREAKING CHANGES | |
| - bump peerDependencies antd >= v6 | |
| ## [4.0.0-alpha.1](https://github.com/ant-design/antd-style/compare/v3.7.1...v4.0.0-alpha.1) (2025-07-24) | |
| ### ✨ Features | |
| - Support antd v6 cssVar ([cd838b0](https://github.com/ant-design/antd-style/commit/cd838b0)) | |
| ### 💥 BREAKING CHANGES | |
| - bump peerDependencies antd >= v6 |
🧰 Tools
🪛 markdownlint-cli2 (0.17.2)
5-5: Heading levels should only increment by one level at a time
Expected: h2; Actual: h3
(MD001, heading-increment)
🤖 Prompt for AI Agents
In CHANGELOG.md around lines 3 to 11, the version title uses a single '#' header
which is inconsistent with other version titles using '##' and causes
markdownlint MD001 errors due to skipping heading levels. Change the version
title header from '#' to '##' to maintain consistent heading levels and fix the
linting issue.
BREAKING CHANGES: bump peerDependencies antd >= v6
Summary by CodeRabbit
新功能
cssVar提供的 CSS 变量，提升了主题灵活性和自定义能力。依赖更新
antd依赖至 6.0.0-alpha.1 预发布版本。happy-dom，提升测试兼容性和稳定性。vite和vitest也进行了版本升级。文档
测试
构建与配置